<template>
    <div class="mainConnect">
        <div class="header_icon" id="header_icon_img">
            <a>
                <span>{{module.seoTitle}}</span>
                <p>{{module.seoDescription}}</p>
                <img id="icon_img" src="" alt="">
            </a>
        </div>
        <div class="connectContainer container">
            <div class="attract">
                <div class="attractType">
                    <span class="ce_icon ce_iconn_E903">招商掘金</span>
                    <div class="attractLine"></div>
                </div>
                <el-col :xs="24" :sm="12" :md="12" v-for="(item,index) in attractInvestment" :key="index">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="cardTitle clearfix">
                            <span class="el-icon-phone">招商热线</span>
                        </div>
                        <div class="text item">
                            <div class="itemLeft">
                                <div class="attractManage">
                                    <span class="attractFont">{{item.position}}</span>&nbsp;：
                                    <p class="attractFont">{{item.name}}</p>
                                </div>
                                <div class="attractTel">
                                    <span class="attractFont">联系电话</span>&nbsp;：
                                    <p class="attractFont">{{item.mobile}}</p>
                                </div>
                                <div class="leaveMsg">
                                    <el-button type="primary" @click="leaveMsg(item)">留言</el-button>
                                </div>
                            </div>

                            <div class="itemRight">
                                <div class="rightSpan">
                                    <span>扫码咨询</span>
                                    <img :src="item.qrImg">
                                </div>

                            </div>
                        </div>
                    </el-card>
                </el-col>

            </div>

            <div class="attract">
                <div class="attractType">
                    <span class="ce_icon ce_icon_tel">客服专线</span>
                    <div class="attractLine"></div>
                </div>
                <el-col :xs="24" :sm="12" :md="12" v-for="(item,index) in clientSerivce" :key="index">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="cardTitle clearfix">
                            <span class="el-icon-phone">客服热线</span>
                        </div>
                        <div class="text item">
                            <div class="itemLeft">
                                <div class="attractManage">
                                    <span class="attractFont">{{item.position}}</span>&nbsp;：
                                    <p class="attractFont">{{item.nickName}}</p>
                                </div>
                                <div class="attractTel">
                                    <span class="attractFont">联系电话</span>&nbsp;：
                                    <p class="attractFont">{{item.mobile}}</p>
                                </div>
                                <div class="leaveMsg">
                                    <el-button type="primary" @click="leaveMsg(item)">留言</el-button>
                                </div>
                            </div>

                            <div class="itemRight">
                                <div class="rightSpan">
                                    <span>扫码咨询</span>
                                    <img :src="item.qrImg">
                                </div>

                            </div>
                        </div>
                    </el-card>
                </el-col>

            </div>

            <div class="attract">
                <div class="attractType">
                    <span class="glyphicon glyphicon-send">亚盟总部</span>
                    <div class="attractLine"></div>
                </div>

                <div class="row">
                    <el-col class="addrTag" :xs="24" :sm="8" :md="8">
                        <div class="addrLeft"><span class="el-icon-location"></span></div>
                        <div class="addrRight">
                            <span>地址</span>
                            <p>{{siteInfo.address}}</p>
                            <a href="javascript:;">立即前往</a>
                        </div>
                    </el-col>
                    <el-col class="addrTag" :xs="24" :sm="8" :md="8">
                        <div class="addrLeft"><span class="glyphicon glyphicon-envelope"></span></div>
                        <div class="addrRight">
                            <span>电子邮箱</span>
                            <p>{{siteInfo.email}}</p>
                            <a href="javascript:;">欢迎发送</a>
                        </div>
                    </el-col>
                    <el-col class="addrTag" :xs="24" :sm="8" :md="8">
                        <div class="addrLeft"><span class="glyphicon glyphicon-globe"></span></div>
                        <div class="addrRight">
                            <span>全国客服专线</span>
                            <p>{{siteInfo.phone}}</p>
                            <a href="javascript:;">7x24小时咨询帮助</a>
                        </div>
                    </el-col>
                </div>
                <BDMap></BDMap>
            </div>

        </div>


        <!--留言弹窗-->
        <div class="leaveBox">
            <el-dialog
                    title="客户留言"
                    :visible.sync="dialogVisible"
                    :before-close="handleClose">
                <el-form :model="guestBook" :rules="rules" ref="guestBook" label-width="100px" class="demo-guestBook">
                    <!--<el-form-item label="姓名" prop="name">
                        <el-input v-model="guestBook.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="guestBook.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="微信号" prop="wechat">
                        <el-input v-model="guestBook.wechat"></el-input>
                    </el-form-item>-->
                    <el-form-item label="留言咨询内容" prop="desc">
                        <el-input type="textarea" v-model="guestBook.content"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="cancel" @click="dialogVisible = false">取 消</el-button>
                    <el-button class="submit" type="primary" @click="sendGuestBook('guestBook')">确 定</el-button>
                </span>
            </el-dialog>

        </div>
        <dialog-login ref="dialogLogin" :showDialog="showDialog"></dialog-login>
    </div>
</template>

<script>
    import BDMap from "../../components/BDMap";
    import DialogLogin from "../../components/DialogLogin";

    export default {
        name: "ConnectList",
        components: {BDMap, DialogLogin},
        data() {
            return {
                message: "联系我们列表",
                headerImg: '/base/imgs/connect/connect-us-1.jpg',
                dialogVisible: false,
                wechatCode: '/base/imgs/wechat_code.png',
                DEPARTMENT_NAME: DEPARTMENT_NAME,
                module:{},
                bannerPic:"",
                employees: [],
                employee:{},//发送留言
                clientSerivce: [],//客服
                attractInvestment: [],//招商
                memberLogin: {},
                siteInfo:{},
                showDialog: "",//打开模态框的type
                guestBook: {},
                rules: {
                    name: [
                        {required: true, message: '请填写您的姓名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请填写您的手机号', trigger: 'blur'},
                        {min: 11, max: 18, message: '请正确填写手机号', trigger: 'blur'}
                    ],

                }
            }
        },
        mounted() {
            this.getWidth();
            this.getEmpList();
            this.getAboutUs();
            this.siteInfo=LocalStorage.get(SITE_INFO);
        },
        methods: {
            getHeaderIcon() {
                let headerIcon = document.getElementById("header_icon_img");
                //headerIcon.style.backgroundImage = "url('" + this.headerImg + "')";
                headerIcon.style.backgroundImage = "url('" + this.bannerPic + "')";
            },
            getWidth() {
                let aSpan = document.querySelectorAll(".mainConnect .header_icon a span")[0];
                let aP = document.querySelectorAll(".mainConnect .header_icon a p")[0];
                let cardManage = document.querySelectorAll(".mainConnect .connectContainer .box-card .item .itemLeft .attractFont");
                let cardImg = document.querySelectorAll(".mainConnect .connectContainer .box-card .item .itemRight img");
                let codeTitle = document.querySelectorAll(".mainConnect .connectContainer .box-card .item .itemRight .rightSpan span");
                let addrTag = document.querySelectorAll(".mainConnect .connectContainer .row .addrTag");

                $(window).on("resize", function () {
                    let wid = $(window).width();

                    if (wid >= 1200) {
                        console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
                    } else if (wid > 992 && wid < 1200) {
                        aSpan.style.marginLeft = "80px";
                        aP.style.marginLeft = "80px";
                        for (let i = 0; i < cardManage.length; i++) {
                            cardManage[i].style.fontSize = "14px";
                            /*cardImg[i].style.width="80px";*/
                        }

                    } else if (wid < 992 && wid >= 768) {
                        console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
                    } else if (wid < 768) {
                        aSpan.style.marginLeft = "20px";
                        aSpan.style.fontSize = "36px";
                        aP.style.marginLeft = "20px";
                        aP.style.fontSize = "28px";
                        for (let i = 0; i < cardManage.length; i++) {
                            cardManage[i].style.fontSize = "14px";
                            /*cardImg[i].style.width="80px";*/
                        }
                        for (let j = 0; j < cardImg.length; j++) {
                            cardImg[j].style.width = "110px";
                            codeTitle[j].style.padding = "5px 27px";
                        }
                        for (let k = 0; k < addrTag.length; k++) {
                            addrTag[k].style.marginLeft = "20px";
                        }
                    }
                }).trigger("resize");
            },
            /*留言对话框关闭*/
            handleClose(done) {

            },

            getEmpList() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/emp/attract').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.employees = resp.responseData;
                        for (let i = 0; i < this.employees.length; i++) {
                            if (this.employees[i].depId === DEPARTMENT_NAME.DEP_ATTRACT.key) {
                                this.attractInvestment.push(this.employees[i]);
                            }else if(this.employees[i].depId === DEPARTMENT_NAME.DEP_CLIENT_SERVICE.key){
                                this.clientSerivce.push(this.employees[i]);
                            }
                        }
                    }
                });
            },
            leaveMsg(item) {
                if (Tool.isNotEmpty(LocalStorage.get(MEMBER_LOGIN_LOCAL))) {
                    this.memberLogin = LocalStorage.get(MEMBER_LOGIN_LOCAL) || {};
                } else {
                    this.memberLogin = Tool.getLoginMember() || {};
                }
                if (Tool.isEmpty(this.memberLogin)) {
                    toast.warning("请先登录");
                    this.showDialog = "STATUS_LOGIN";
                    this.$refs.dialogLogin.openLoginModal(this.showDialog);
                } else {
                    this.dialogVisible = true;
                    this.employee=item;
                }

            },
            sendGuestBook(formName) {
                let loading = this.openLoading();
                this.guestBook.memberId=this.memberLogin.uniId;
                this.guestBook.employeeId=this.employee.uniId;
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/guestBook/send',this.guestBook).then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.dialogVisible=false;
                        toast.success("留言已发送至: "+this.employee.position+" 请耐心等待，24h内回复！");
                    }else{
                        this.$message.error({
                            showClose: true,
                            message: resp.responseMsg,
                            center:true,
                        });
                    }
                });
            },
            getAboutUs() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/module/aboutUs').then((response) => {
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    }, 10);
                    let resp = response.data;
                    if (resp.success) {
                        this.module=resp.responseData[0];
                        this.bannerPic=this.module.picList[0];
                        this.getHeaderIcon();
                    }else{
                        this.$message.error({
                            showClose: true,
                            message: resp.responseMsg,
                            center:true,
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .mainConnect .header_icon {

    }

    #header_icon_img {
        width: 100%;
        height: 300px;
        background-position: center;
    }

    .mainConnect .header_icon a {
        text-decoration: none;
        color: #ffffff;
    }

    .mainConnect .header_icon a span {
        font-size: 50px;
        font-weight: bolder;
        margin-left: 25%;
        margin-top: 100px;
        line-height: 36px;
        display: inline-block;
    }

    .mainConnect .header_icon a p {
        font-size: 32px;
        margin-left: 25%;
        margin-top: 10px;
    }

    /*招商卡片*/
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        max-width: 480px;
        margin-right: 10px;
        margin-bottom: 20px;
    }

    /*自定义卡片*/
    .mainConnect .connectContainer {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .mainConnect .connectContainer .attractType {
        margin-bottom: 20px;
    }

    .mainConnect .connectContainer .attractType span {
        font-size: 24px;
        line-height: 45px;
        position: relative;
        font-weight: bolder;
    }

    .mainConnect .connectContainer .attractType span:before {
        font-weight: normal;
        display: block;
        float: left;
        font-size: 30px;
        margin-right: 20px;
        margin-top: 5px;
        color: #e92322;
    }

    .mainConnect .connectContainer .attractType .attractLine {
        margin-top: 10px;
        border-bottom: 1px solid #cccccc;
    }

    /*招商热线*/
    /deep/ .el-card__header {
        background: #e92322;
        color: white;
    }

    /deep/ .el-card__body {
        padding: 5px 20px;
    }

    .mainConnect .connectContainer .box-card .cardTitle {

    }

    .mainConnect .connectContainer .box-card .cardTitle span {
        font-size: 18px;
    }

    .mainConnect .connectContainer .box-card .cardTitle span:before {
        margin-right: 10px;
    }

    .mainConnect .connectContainer .box-card .item .itemLeft {
        float: left;
        margin-right: 4px;
    }

    .mainConnect .connectContainer .box-card .item .attractManage {

    }

    .mainConnect .connectContainer .box-card .item .attractManage span {
        display: inline-block;
        float: left;
        font-size: 18px;
        margin-left: 10px;
    }

    .mainConnect .connectContainer .box-card .item .attractManage p {
        display: inline-block;
        margin-left: 10px;
        font-size: 18px;
    }

    .mainConnect .connectContainer .box-card .item .attractTel {

    }

    .mainConnect .connectContainer .box-card .item .attractTel span {
        display: inline-block;
        float: left;
        font-size: 18px;
        margin-left: 10px;
    }

    .mainConnect .connectContainer .box-card .item .attractTel p {
        display: inline-block;
        margin-left: 10px;
        font-size: 18px;
    }

    /*扫码咨询*/
    .mainConnect .connectContainer .box-card .item .itemRight {
        margin-bottom: 20px;
    }

    .mainConnect .connectContainer .box-card .item .itemRight .rightSpan {
        position: relative;
        bottom: 0;
    }

    .mainConnect .connectContainer .box-card .item .itemRight .rightSpan span {
        position: absolute;
        background: rgba(120, 198, 51, 0.99);
        color: white;
        padding: 5px 33px;
        right: 0;
        top: -10px;
    }

    .mainConnect .connectContainer .box-card .item .itemRight .rightSpan img {
        position: absolute;
        margin-top: 20px;
        max-width: 120px;
        right: 0;
    }

    .mainConnect .connectContainer .box-card .item .leaveMsg {
        display: inline-block;
        margin-left: 10px;
        margin-bottom: 40px;
    }

    .mainConnect .connectContainer .box-card .item .leaveMsg button {
        background: #e92322;
        border: none;
        padding: 15px 50px;
    }

    .mainConnect .connectContainer .box-card .item .leaveMsg button:hover,
    .mainConnect .connectContainer .box-card .item .leaveMsg button:focus {
        background: #fc4847;
        border: none;
    }

    /*留言对话框*/
    .mainConnect .leaveBox .cancel {
        border: 1px solid #e92322;
    }

    .mainConnect .leaveBox .cancel:hover,
    .mainConnect .leaveBox .cancel:focus {
        color: #e92322;
        background: rgba(159, 2, 1, .2);
    }

    .mainConnect .leaveBox .submit {
        background: #e92322;
        border: none;
    }

    .mainConnect .leaveBox .submit:hover,
    .mainConnect .leaveBox .submit:focus {
        background: #fc4847;
        border: none;
    }

    /deep/ .el-dialog__header {
        border-bottom: 1px solid #cccccc;
    }

    /*地址*/
    .mainConnect .connectContainer .row .addrTag {
        float: left;
        margin-bottom: 20px;
    }

    .mainConnect .connectContainer .row .addrTag .addrLeft {
        float: left;
    }

    .mainConnect .connectContainer .row .addrTag .addrLeft span {
        color: #1d7dd6;
        font-size: 24px;
        line-height: 40px;
    }

    .mainConnect .connectContainer .row .addrTag .addrRight {
        display: inline-block;
        margin-left: 10px;
    }

    .mainConnect .connectContainer .row .addrTag .addrRight span {
        font-size: 24px;

    }

    .mainConnect .connectContainer .row .addrTag .addrRight p {
        font-size: 16px;
        max-width: 300px;
        display: block;
        height: 40px;
        margin: 10px auto;
    }

    .mainConnect .connectContainer .row .addrTag .addrRight a {
        text-decoration: none;
    }
</style>